<template>
    <div style="position:relative">
        <Card shadow>
            <!-- search start -->
            <div class="search">
                <Form :model="search" class="search_box" inline label-position="right">
                    <FormItem label="分部 -> 楼层：">
                        <Cascader class="cascader" :value="cascadeArr" :data="cascadeList" change-on-select @on-change="cascadeSelection" :clearable="false"></Cascader>
                    </FormItem>

                    <FormItem label="办公类型：">
                        <Select style="width:100px" v-model="search.work_type">
                            <Option :value="-1"> 全部 </Option>
                            <Option :value="1"> 开放办公 </Option>
                            <Option :value="2"> 独立办公</Option>
                        </Select>
                    </FormItem>

                    <FormItem label="办公状态：">
                        <Select style="width:100px" v-model="search.use_status">
                            <Option :value="-1"> 全部 </Option>
                            <Option :value="0"> 空置 </Option>
                            <Option :value="1"> 有人 </Option>
                            <Option :value="2"> 无人</Option>
                        </Select>
                    </FormItem>

                    <FormItem>
                        <Button icon="md-search" type="primary" @click="searchList">搜索</Button>
                    </FormItem>

                </Form>

            </div> <!-- end search -->
        </Card>

        <div class="roomTypeHeader">
            <span>
                <i> {{info.vacant_ws_num}} </i> <br />
                空置工位/办公室
            </span>
            <span>
                <i> {{info.person_num}} </i><br />
                办公人数
            </span>
            <span>
                <i> {{info.use_rate + '%'}}</i><br />
                总体出租率
            </span>
            <span>
                <i>{{info.use_ws_num}}</i><br />
                已使用
            </span>
        </div>

        <listRender :listData="listData" @changePage="changePage"></listRender>

        <Spin size="large" fix v-if="loading"></Spin>
    </div>
</template>


<script>
    import listRender from './list_render'
    import axios from '@/libs/api.request'
    import {
        mapGetters,
        mapMutations
    } from 'vuex'
    export default {
        name: 'info-all',
        components: {
            listRender
        },
        data() {
            return {
                // 加载状态
                loading: false,
                // 工位列表
                listData: [],

                cascadeArr: [-1],

                // 概览信息
                info: {
                    person_num: 15,
                    total_num: 9,
                    use_rate: 67,
                    use_ws_num: 6,
                    vacant_ws_num: 3,
                },

                // 搜索对象
                search: {
                    branchid: -1,
                    floorid: -1,
                    use_status: -1,
                    work_type: -1
                },
            }
        },
        methods: {
            ...mapMutations(['myClose']),
            ...mapGetters(['getBranchList']),

            // 获取概览信息
            getInfo() {
                this.loading = true
                let data = this.search
                axios.ajax_post('admin-space-ajax_get_overview', data).then(res => {
                    if (res.data.code === 1) {
                        this.info = res.data.data
                        this.getWorkList()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 获取工位
            getWorkList() {
                let data = this.search
                axios.ajax_post('admin-space-ajax_get_ws', data).then(res => {
                    this.loading = false
                    if (res.data.code === 1) {
                        this.listData = res.data.data.list
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 级联选择
            cascadeSelection(value) {
                if (value.length == 1) {
                    this.search.branchid = value[0]
                    this.search.floorid = -1
                    return false
                }
                this.search.branchid = value[0]
                this.search.floorid = value[1]
            },

            // 搜索
            searchList() {
                this.getInfo()
            },

            // 页面跳转
            changePage(wsid) {
                this.myClose('workstation-details')
                this.$_changePage('workstation-details', '工位详情', {
                    wsid
                })
            }
        },
        computed: {
            cascadeList() {
                let list = JSON.parse(JSON.stringify(this.getBranchList()))
                list.forEach((item) => {
                    item.children.forEach((floor) => {
                        delete floor.children
                    })
                })
                list.unshift({
                    value: -1,
                    label: '全部'
                })
                return list
            },
        },
        created() {
            this.getInfo()
        }
    }
</script>

<style lang='less' scoped>
    .search {
        .search_box {
            height: 40px;
            display: flex;

            .option {
                width: 100px;
            }

            .ivu-form-item {
                margin-right: 12px;
                display: flex;
                justify-content: flex-start;
                margin-bottom: 20px;
            }
        }
    }

    .roomTypeHeader {
        margin-top: 10px;
        width: 100%;
        height: 80px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        text-align: center;
        margin-bottom: 20px;
        // padding: 20px 0;

        span {
            width: 100%;
            font-size: 16px;
            position: relative;

            &::before {
                content: "";
                position: absolute;
                top: 20px;
                right: 0;
                width: 1px;
                height: 40px;
                background-color: #ccc;
            }

            &:last-child::before {
                display: none;
            }

            i {
                font-size: 36px;
                font-style: normal;
                color: #2A7EFB;
            }
        }
    }

    .list {
        width: 100%;
        height: 500px;
        background-color: #2A7EFB;
        overflow: auto;
        position: relative;
    }
</style>